import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression' // gzip压缩插件
import { visualizer } from 'rollup-plugin-visualizer' // 打包体积分析插件
import { Plugin as importToCDN } from 'vite-plugin-cdn-import' // 使用CDN加载外部模块插件

// Vite 配置文件
export default defineConfig({
  plugins: [
    vue(), // Vue 3 插件
    viteCompression({
      // gzip压缩配置
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用压缩
      threshold: 10240, // 体积大于 threshold 才会被压缩，单位 b，默认 10240 (10kb)
      algorithm: 'gzip', // 压缩算法
      ext: '.gz' // 生成的压缩包后缀
    }),
    visualizer({
      // 打包体积分析配置
      open: true, // 打包完成后自动打开分析报告
      gzipSize: true, // 计算 gzip 大小
      brotliSize: true // 计算 brotli 大小
    }),
    importToCDN({
      // 配置 CDN 加载模块
      modules: [
        {
          name: 'vue', // 模块名称
          var: 'Vue', // 全局变量名
          path: 'https://unpkg.com/vue@3/dist/vue.global.prod.js' // CDN 地址
        },
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: 'https://unpkg.com/element-plus', // js CDN
          css: 'https://unpkg.com/element-plus/dist/index.css' // css CDN
        }
      ]
    })
  ],
  // 以上为打包优化代码
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) // @ 指向 src 目录
    }
  },
  css: {
    preprocessorOptions: {
      // CSS 预处理器配置
      scss: {
        additionalData: '@import "src/assets/css/sass.scss";', // 全局引入 scss 文件
        javascriptEnabled: true // 启用 JS 表达式
      }
    }
  },
  // 一个域名配置多个项目
  // base: '/console',
  server: {
    cors: true, // 允许跨域
    open: true, // 自动打开浏览器
    proxy: {
      // 代理配置
      '/api': {
        target: 'http://127.0.0.1:3007', // 目标地址
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
      }
    }
    // port: '8080' // 开发服务器端口配置
  },
  build: {
    target: 'es2015', // 构建目标
    outDir: 'dist', // 输出目录
    assetsDir: 'assets', // 静态资源目录
    minify: 'terser', // 混淆器，可选 'terser' 或 'esbuild'
    terserOptions: {
      compress: {
        // 生产环境下移除 console 和 debugger
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      output: {
        // 输出文件名配置
        chunkFileNames: 'assets/js/[name]-[hash].js', // 代码分块命名
        entryFileNames: 'assets/js/[name]-[hash].js', // 入口文件命名
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', // 资源文件命名
        manualChunks(id) {
          // 手动分块配置
          if (id.includes('node_modules')) {
            return 'vendor' // 将 node_modules 中的模块打包到 vendor 块中
          }
        }
      }
    }
  }
})
